<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="导入数据"
      :visible.sync="importDataData.importDataStatus"
      width="40%"
      top="10vh"
      :modal="false"
      class="importDataStatus"
      @close="colosedimportDataStatus"
    >
      <el-steps
        :active="active"
        align-center
        finish-status="success"
        style="margin-bottom: 1rem"
      >
        <el-step
          title="上传文件"
          description="请上传指定格式文件"
        ></el-step>
        <el-step
          title="写入数据"
          description="正在执行写入数据"
        ></el-step>
      </el-steps>
      <div
        class="importDataStatusStep1"
        v-if="active == 0"
      >
        <div class="importDataStatusStep1div">
          <p class="importDataStatusStep1divtitle">批量导入模板</p>
          <p class="explain">
            点击下方文字按钮,批量导出模板,并按照规定格式填写数据,每次填写数据总和不超过10000条
          </p>

          <a
            :href="'http://192.168.2.54:8088/api/ml' + templateUrl"
            :download="templateUrl"
            target="_blank"
            @click=""
            ><i class="el-icon-download"></i>模板下载</a
          >
        </div>
        <div
          class="importDataStatusStep1div"
          style="margin-top: 1.5rem"
        >
          <p class="importDataStatusStep1divtitle">上传文件</p>
          <el-upload
            style="width: calc(100% - 100px); color: rgb(199, 199, 199)"
            class="upload-demo"
            ref="upload"
            :action="uploadUrl"
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :auto-upload="false"
            :file-list="fileList"
            multiple
            :limit="1"
            accept=".xlsx"
          >
            <el-button
              size="small"
              type="text"
              style="font-size: 16px; color: #5677fc"
              ><i class="el-icon-upload"></i>点击上传</el-button
            >
            <div
              slot="tip"
              class="el-upload__tip"
            >
              上传文件格式仅支持xksx,且文件大小不得超过5MB
            </div>
          </el-upload>
        </div>
      </div>
      <div
        class="importDataStatusStep1"
        v-if="active == 1 && arr.result"
      >
        <div class="greenBorder">
          <p
            clsss="importDataStatusStep1divtitle"
            style="font-weight: 600"
          >
            校验数据
          </p>
          <p>共导入数据8989条,其中0条数据错误</p>
        </div>
        <div class="importDataStatusImg">
          <img
            class=""
            src="./img/tupian.jpg"
            alt=""
            srcset=""
          />
          <p>数据格式正确，无错误数据</p>
        </div>
      </div>
      <div
        class="importDataStatusStep1"
        v-if="active == 1 && !arr.result"
      >
        <div class="greenBorder">
          <p
            clsss="importDataStatusStep1divtitle"
            style="font-weight: 600"
          >
            校验数据
          </p>
          <p>
            共导入数据{{ arr.totalNumber }}条,其中发现{{
              arr.errorNumber
            }}处数据错误
          </p>
        </div>

        <el-table
          :data="arr.importResultErrors"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#606266', color: '#fff' }"
          height="320px"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
          />
          <el-table-column
            prop="lineNumber"
            label="行数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fieldName"
            label="错误内容"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="errorMessage"
            label="错误原因"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <div
        class="importDataStatusStep1"
        v-if="active == 2"
      >
        <div class="importDataStatusImg">
          <img
            class=""
            src="./img/tupian2.jpg"
            alt=""
            srcset=""
          />
          <p>数据格式正确，无错误数据</p>
        </div>
        <el-progress
          style="margin-top: 2rem"
          :percentage="percentage"
          :color="customColorMethod"
          :stroke-width="12"
        ></el-progress>
      </div>
      <div
        class="importDataStatusStep1"
        v-if="active == 3"
      >
        <div
          class="importDataStatusImg"
          style="width: 30rem"
        >
          <img
            class=""
            src="./img/tupian3.jpg"
            alt=""
            srcset=""
          />
          <p style="font-weight: 600; color: black; margin-bottom: 1rem">
            数据导入正确，无错误数据
          </p>
          <p style="padding-bottom: 5rem">
            成功导入数据{{ arr.totalNumber }}条,点击完成或关闭窗口
          </p>
        </div>
      </div>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          v-if="active != 3"
          @click="importDataData.importDataStatus = false"
          >取 消</el-button
        >
        <el-button
          v-if="active == 0 && !arr.result"
          type="primary"
          @click="importDataNext()"
          >下一步</el-button
        >
        <el-button
          v-if="active == 3"
          type="primary"
          @click="importDataData.importDataStatus = false"
          >完成</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'importData',
  data() {
    return {
      active: 0,
      uploadUrl: '',
      files: null,

      percentage: 0,
      fileList: [],
      renderData: [],
      arr: {
        importResultErrors: [],
        totalNumber: 0,
        errorNumber: 0,
        result: false,
      },
    }
  },
  props: {
    importDataData: Object,
    templateUrl: String,
  },
  mounted() {},

  methods: {
    async importDataNext() {
      if (this.active == 0) {
        if (this.fileList.length > 0) {
          this.active++
          await this.$parent.uploadFile(this.files)
          return
        } else {
          this.$message.info('请上传文件')
        }
      }
      if (this.active == 1) {
        console.log(123123123)
        this.active++
      }
    },
    getData(data) {
      this.arr = data
      if (data.result) {
        this.active++
        let myInterval = setInterval(() => {
          if (this.percentage === 100) {
            clearInterval(myInterval)
            this.$parent.refresh()
            this.active++
          }

          let numRandom = Math.floor(Math.random() * 10)
          this.percentage =
            this.percentage + numRandom >= 100
              ? 100
              : this.percentage + numRandom
        }, 200)
      }

      return
    },
    colosedimportDataStatus() {
      this.active = 0
      this.files = null
      this.percentage = 0
      this.fileList = []
      this.arr.result = false
    },
    handlePreview(file) {
      console.log(file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}?`)
    },
    handleChange(file, fileList) {
      fileList = fileList.filter((item) => {
        if (item.raw) {
          return item
        }
        return item.raw
      })
      console.log(fileList)
      this.files = new FormData()
      fileList.forEach((item) => {
        if (item.raw) {
          this.files.append('file', item.raw)
        }
      })
      this.fileList = fileList
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399'
      } else if (percentage < 70) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    },
    uploadChange(file, fileList) {
      fileList = fileList.filter((item) => {
        if (item.raw) {
          return item
        }
        return item.raw
      })
      this.editForm.biDto.files = new FormData()
      fileList.forEach((item) => {
        if (item.raw) {
          this.editForm.biDto.files.append('file', item.raw)
        }
      })
      this.editForm.biDto.files.append('biId', this.editForm.biDto.id)
      this.editForm.biDto.files.append('type', '/ml/requirements/plan')
    },
  },
}
</script>
<style lang="less" scoped>
#warehouseReceipt {
  .importDataStatus {
    .importDataStatusStep1 {
      .greenBorder {
        border: 1px solid #34c758;
        background-color: #f5fcf6;
        padding: 1rem 2rem;
        border-radius: 5px;
      }
      .importDataStatusStep1div {
        color: black;
        background-color: #f3f3f3;
        padding: 3rem;
        border-radius: 10px;
        border-left: 15px solid #5677fc;
        .importDataStatusStep1divA {
          margin-top: 1rem;
          color: #5677fc;
        }
        .importDataStatusStep1divtitle {
          font-weight: 600;

          margin-bottom: 0.5rem;
          font-size: 16px;
          color: #5677fc;
        }
        .explain {
          margin-bottom: 1.5rem;
        }
      }
    }
    .importDataStatusImg {
      margin: 0 auto;
      text-align: center;
      color: #909399;
      width: 15rem;
      height: 25rem;
      img {
        width: 15rem;
        height: 15rem;
      }
    }
  }
}
.el-date-editor {
  margin: 0 10px;
}
.overviewContentLeftbottom {
  position: relative;
  padding: 10px;
  border: 1px dashed #909399;
  height: 24rem;
  width: 80%;
  .shenpiPng {
    position: absolute;
    top: -30px;
    right: -60px;
    width: 100px;
    height: 100px;
  }
  .overviewContentLeftbottomTitle {
  }
  .steps {
    .stepsItem {
      display: flex;
      position: relative;
      padding: 2rem;

      .progress {
        position: absolute;
        height: 3rem;
        width: 2px;
        background-color: #eeeeee;
        bottom: -1rem;
        left: 3rem;
      }
      .xmtime {
        display: flex;
        justify-content: space-between;
        width: 100%;
      }
      .nr {
        margin-top: 2px;
      }
    }
    .userImg {
      margin-right: 2rem;
      img {
        width: 2rem;
        height: 2rem;
      }
    }
  }
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}

b-10 {
  margin-bottom: 10px;
}
</style>
